<template>
  <div class="bigbox">
    <div class="top">
      <div class="left">
        <el-form
          ref="form"
          :model="form"
          label-position="left"
          label-width="80px"
        >
          <el-row :gutter="20" type="flex" justify="space-between">
            <el-col :span="5">
              <el-form-item label="用户名称">
                <FilterSelect2
                  v-model="form.orgNo"
                  :optionlist="selectList"
                  :valuekey="{ name: 'name', value: 'companyNo' }"
                ></FilterSelect2>
                <!-- <el-select v-model="form.orgNo">
                  <el-option
                    v-for="item in selectList"
                    :key="item.companyNo"
                    :label="item.name"
                    :value="item.companyNo"
                  >
                  </el-option>
                </el-select> -->
              </el-form-item>
            </el-col>
            <el-col :span="5" style="text-align: right">
              <el-form-item>
                <Twobtn @chaxun="init" @chongzhi="reset"></Twobtn>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="main">
      <TopTile @command="command" @daochu="daochu" @shuaxin="init"></TopTile>
      <div class="df">
        <div style="width: 60%; height: 50%">
          <nt-table
            v-loading="loading"
            :issize="issize"
            :fit="true"
            :tableData="List"
            :tableConfig="tableConfig"
          >
          </nt-table>
        </div>
        <div style="width: 40%; height: 100%">
          <nt-echart :loading="loading2" :options="pieOptions"></nt-echart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ntEchart from '@/components/nt-echart.vue'
import ntTable from '@/components/nt-table'
import TopTile from '@/components/TopTitle/index.vue'
import FilterSelect2 from '@/components/FilterSelect2'
import { exportexcel } from '@/utils/excel'
import {
  getListApi,
  getPieApi
} from '@/api/Intelligence-maintenance/Device-management/Device-statistics'
import { getDeviceChildrenApi, getDeviceRootApi } from '@/api'

export default {
  name: 'DeviceStatistics',
  components: { ntEchart, ntTable, TopTile, FilterSelect2 },

  data() {
    return {
      form: {},
      selectList: [],
      loading: false,
      loading2: false,
      issize: 'middle',
      List: [],
      pieList: [],
      tableConfig: [
        { label: '设备年限', prop: 'deviceYear', align: 'center' },
        { label: '变压器', prop: 'byqNumber', align: 'right' },
        { label: '屏柜', prop: 'pgNumber', align: 'right' },
        { label: '间隔', prop: 'jgNumber', align: 'right' },
        { label: '断路器', prop: 'dlqNumber', align: 'right' },
        { label: '隔离开关', prop: 'glkgNumber', align: 'right' },
        { label: '电容器', prop: 'drqNumber', align: 'right' },
        { label: '电流互感器', prop: 'dlhgqNumber', align: 'right' },
        { label: '电压互感器', prop: 'dvhgqNumber', align: 'right' }
      ]
    }
  },
  computed: {
    pieOptions() {
      const data = this.pieList.map((i) => {
        return {
          name: i.dateStr,
          value: i.value
        }
      })
      return {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          width: '60%',
          bottom: '40%'
        },
        series: [
          {
            type: 'pie',
            radius: '40%',
            top: '-50%',
            labelLine: {
              length: 50
            },
            label: {
              formatter: '{b}: {c}'
            },
            data: this.List.length > 0 ? data : []
          }
        ]
      }
    }
  },
  async created() {
    await this.getTreeList()
    this.init()
  },
  methods: {
    async getTreeList() {
      const res = await getDeviceRootApi()
      const res2 = await getDeviceChildrenApi(res.data.list[0])
      this.selectList = res2.data.list
      this.form.orgNo = this.selectList[0].companyNo
    },
    async getList() {
      this.loading = true
      const res = await getListApi({
        orgNo: this.form.orgNo
      })
      this.List = res.data.list
      this.loading = false
    },
    async getPie() {
      this.loading2 = true
      const res = await getPieApi({
        orgNo: this.form.orgNo
      })
      this.pieList = res.data.list
      this.loading2 = false
    },
    init() {
      Promise.all([this.getList(), this.getPie()])
    },
    reset() {
      this.form.orgNo = this.selectList[0].companyNo
    },
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    daochu() {
      exportexcel(
        '/pio-microservice-biz/pio/device/stats/excel',
        {
          orgNo: this.form.orgNo
        },
        '设备统计'
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.bigbox {
  padding: 10px;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .top {
    min-height: 80px;
    margin-bottom: 10px;
    background-color: #fff;
    padding: 20px;
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 20px;
    .df {
      display: flex;
      flex: 1;
    }
  }
}
</style>
